<template>
  <!-- 树节点表单弹窗 -->
  <a-modal
    :title="headerTitle"
    :visible.sync="dialogVisible"
    :confirm-loading="loading"
    width="600px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <custom-form :form-list="formList" :form="form" edit-model="1" />

        <!-- <a-row v-if="form.parent">
                <a-col :md="20" :sm="20">
                    <a-form-model-item label="父节点">
                        <BaseInput disabled v-model.trim="form.parent" />
                    </a-form-model-item>
                </a-col>
            </a-row>
         
            <a-row>
                <a-col :md="20" :sm="20">
                    <a-form-model-item prop="name" label="节点名">
                        <BaseInput v-model.trim="form.name" />
                    </a-form-model-item>
                </a-col>
            </a-row> -->
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import TitleName from '@/components/TitleName/index.vue'
export default {
  props: {
    // 显隐控件
    visible: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 表单
    form: {
      type: [Object, String],
      default() {
        return {}
      }
    },
    headerTitle: {
      type: String,
      default() {
        return ''
      }
    },
    formList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    // 弹窗控件
    dialogVisible: {
      get: function() {
        return this.visible
      },
      set: function(e) {
        this.$emit('update:visible', e)
      }
    }
  },
  data() {
    return {
      loading: false, // 确定按钮 loading
      rules: {
        name: [{ required: true, whitespace: true, message: '请填写节点名称', trigger: 'change' }]
      }
    }
  },
  methods: {
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$emit('confirm')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCancel() {
      this.dialogVisible = false
    }
  },
  watch: {
    visible(e) {
      if (!e) {
        // 初始化表单
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate()
        })
      } else {
        this.$nextTick(() => {
          const requireDom = document.querySelectorAll('.ant-form-item-required')
          const requireDomArray = Array.from(requireDom)
          requireDomArray.forEach(item => {
            item.parentNode.nextSibling.children[0].children[0].classList.add('requiredFormItem') // 找到'.ant-form-item-children'元素添加样式
          })
        })
      }
    }
  }
}
</script>
